<template>
    <div class="new-group">
        <el-tabs class="tabs" type="card" v-model="activeName2" @tab-click="handleClick">
            <el-tab-pane :label="$t('collDetail.collHandle')" name="first">
                <el-card style="margin-bottom: 20px;">
                    <div class='title'>
                        <span>{{$t('collDetail.cust')}}</span>
                        <span class="flag-btn" v-if="flag === '1'" style="border: 1px solid #00cc66; color: #009900; background: #99ff66;">{{$t('collDetail.newUser')}}</span>
                        <span class="flag-btn" v-if="flag === '2'" style="border: 1px solid #ff9900; color: #cc6600; background: #ffff99;">{{$t('collDetail.conUser')}}</span>
                        <span class="flag-btn" v-if="flag === '3'" style="border: 1px solid #cc6666; color: #cc0066; background: #ffccff;">{{$t('collDetail.extUser')}}</span>
                    </div>
                    <div class="customer">
                        <div class="customer-item">
                            <span>{{$t('collDetail.realName')}}：</span>
                            <span>{{customerInfo.realName}}</span>
                        </div>
                        <div class="customer-item">
                            <span>{{$t('collDetail.phoneNo')}}：</span>
                            <span>{{customerInfo.appUserName}}</span>
                        </div>
                        <div class="customer-item">
                            <span>{{$t('collDetail.companyTel')}}：</span>
                            <span>{{customerInfo.companyTel}}</span>
                        </div>
                    </div>
                    <div class="customer" v-for="(item, index) in getContactArr" :key="index">
                        <div class="customer-item">
                            <span>{{$t('collDetail.urgentName1')}}{{index+1}}：</span>
                            <span>{{item.contactsName}}</span>
                        </div>
                        <div class="customer-item">
                            <span>{{$t('collDetail.phoneNo')}}：</span>
                            <span>{{item.mobile}}</span>
                        </div>
                        <div class="customer-item">
                            <span>{{$t('collDetail.relation')}}：</span>
                            <span>{{item.relation}}</span>
                        </div>
                    </div>
                </el-card>
                <el-card class="el-card" style="margin-bottom: 40px;">
                    <div class='title'>
                        {{$t('collDetail.collResult')}}
                    </div>
                    <div class='personal-opinion'>
                        <div>
                            <div class='personal-opinion-item'>
                                <span><i style="color: red;margin-right: 2px;">*</i>{{$t('collDetail.callResult')}}</span>
                                <el-select v-model='inp1' :placeholder="$t('rule.choose')" :disabled="true">
                                    <el-option
                                    v-for='item in callStatus'
                                    :key='item.value'
                                    :label='item.label'
                                    :value='item.value'>
                                    </el-option>
                                </el-select>
                                <b class="unit"></b>
                            </div>
                            <div class='personal-opinion-item'>
                                <span><i style="color: red;margin-right: 2px;">*</i>{{$t('collDetail.errorReason')}}</span>
                                <el-select v-model='inp2' :placeholder="$t('rule.choose')" :disabled="true">
                                    <el-option
                                    v-for='item in errorResult'
                                    :key='item.value'
                                    :label='item.label'
                                    :value='item.value'>
                                    </el-option>
                                </el-select>
                                <b class="unit"></b>
                            </div>
                            <div class='personal-opinion-item'>
                                <span><i style="color: red;margin-right: 2px;">*</i>{{$t('collDetail.handleResult')}}</span>
                                <el-select v-model='inp3' :placeholder="$t('rule.choose')" :disabled="true">
                                    <el-option
                                    v-for='item in handleResult'
                                    :key='item.value'
                                    :label='item.label'
                                    :value='item.value'>
                                    </el-option>
                                </el-select>
                                <b class="unit"></b>
                            </div>
                        </div>
                        <div>
                            <div class='personal-opinion-item'>
                                <span>{{$t('collDetail.overdueAmt')}}</span>
                                <el-input v-model='overdueAmt' :disabled="true"></el-input>
                                <b class="unit">IDR</b>
                            </div>
                            <div class='personal-opinion-item'>
                                <span>{{$t('collDetail.breakAmt')}}</span>
                                <el-input v-model='breakAmt' :disabled="true"></el-input>
                                <b class="unit">IDR</b>
                            </div>
                        </div>
                        <div>
                            <div class='personal-opinion-item'>
                                <span>{{$t('collDetail.InterestRate')}}</span>
                                <el-input v-model='overdueInterest' :disabled="true"></el-input>
                                <b class="unit">IDR</b>
                            </div>
                            <div class='personal-opinion-item'>
                                <span>{{$t('reduDetail.breakIntAmt')}}</span>
                                <el-input v-model='breakInterestAmt' :disabled="true"></el-input>
                                <b class="unit">IDR</b>
                            </div>
                            <div class='personal-opinion-item'>
                                <span>{{$t('reduDetail.redRepAmt')}}</span>
                                <el-input v-model='redRepAmt' :disabled="true"></el-input>
                                <b class="unit">IDR</b>
                            </div>
                        </div>
                        <div>
                            <div class="personal-opinion-code">
                                <span>{{$t('collDetail.interestDetail')}}</span>
                                <div class="coll-code-fine" style="width: 300px;">
                                    <div>
                                        {{$t('loanDetail.totalInterest')}}({{interestData.Pinterest}}%)<span class="ride">*</span>{{$t('collDetail.overdue')}}({{interestData.overdueDay}}){{$t('processing.day')}}=({{interestData.PinterestAmt}})IDR
                                    </div>
                                    <div>
                                        <span v-show="channel === 1">{{$t('loanDetail.totalAccountFee')}}</span>
                                        <span v-show="channel === 2">{{$t('loanDetail.transferfee')}}</span>
                                        <span v-show="channel === 4">{{$t('loanDetail.dataMaintainFee')}}</span>
                                        <span v-show="channel === 5">{{$t('loanDetail.consultingFee')}}</span>
                                        <span v-show="channel === 6 || channel === 10">{{$t('loanDetail.totalAccountFee')}}</span>
                                        <span v-show="channel === 8">{{$t('loanDetail.flatformManFee')}}</span>
                                        ({{interestData.PaccountFee}}%)<span class="ride">*</span>{{$t('collDetail.overdue')}}({{interestData.overdueDay}}){{$t('processing.day')}}=({{interestData.PaccountFeeAmt}})IDR
                                    </div>
                                    <div>
                                        <span v-show="channel === 1">{{$t('loanDetail.totalCreditserviceFee')}}</span>
                                        <span v-show="channel === 2">{{$t('loanDetail.consultationfee')}}</span>
                                        <span v-show="channel === 4">{{$t('loanDetail.flatformManFee')}}</span>
                                        <span v-show="channel === 5">{{$t('loanDetail.totalCreditserviceFee')}}</span>
                                        <span v-show="channel === 6 || channel === 10">{{$t('loanDetail.memberFee')}}</span>
                                        <span v-show="channel === 8">{{$t('loanDetail.consultationfee')}}</span>
                                        ({{interestData.PcreditserviceFee}}%)<span class="ride">*</span>{{$t('collDetail.overdue')}}({{interestData.overdueDay}}){{$t('processing.day')}}=({{interestData.PcreditserviceFeeAmt}})IDR
                                    </div>
                                    <div>
                                        {{$t('collDetail.fine')}}({{interestData.overdueRate}}%)<span class="ride">*</span>{{$t('collDetail.overdue')}}({{interestData.overdueDay}}){{$t('processing.day')}}=({{interestData.overdueRateAmt}})IDR
                                    </div>
                                    <div style="border-bottom: none;">
                                        {{$t('collDetail.fineTotal')}}：{{interestData.totalInterestPenalty}}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class='personal-opinion-item remarks'>
                            <span>{{$t('collDetail.collRemark')}}</span>
                            <el-input type='textarea' size='small' :rows="2" v-model='collectRemark' :placeholder="$t('rule.toLength')" :maxlength="500" :disabled="true"></el-input>
                        </div>
                        <div class='personal-opinion-item datas'>
                            <el-table
                                class="tables"
                                :data="recordList"
                                style="width: 85%;font-size: 12px;margin-left: 53px;"
                                border
                                stripe
                                >
                                <el-table-column 
                                    header-align="center" 
                                    align="center" 
                                    :label="$t('collDetail.num')"
                                    width="65"
                                    type="index">
                                </el-table-column>
                                <el-table-column
                                    header-align="center"
                                    align="center"
                                    prop="dealCrtTime"
                                    :label="$t('collDetail.crtTime')"
                                    width="160">
                                </el-table-column>
                                <el-table-column
                                    header-align="center"
                                    align="center"
                                    prop="callResult"
                                    :label="$t('collDetail.callResult')"
                                    width="100">
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.callResult=== '1'">{{$t('collDetail.normal')}}</span>
                                        <span v-if="scope.row.callResult=== '2'">{{$t('collDetail.fail')}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    header-align="center"
                                    align="center"
                                    prop="callFailedReason"
                                    :label="$t('collDetail.callFailedReason')"
                                    width="100">
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.callFailedReason=== '1'">{{$t('processing.reason1')}}</span>
                                        <span v-else-if="scope.row.callFailedReason=== '2'">{{$t('processing.reason2')}}</span>
                                        <span v-else-if="scope.row.callFailedReason=== '3'">{{$t('processing.reason3')}}</span>
                                        <span v-else-if="scope.row.callFailedReason=== '4'">{{$t('processing.reason4')}}</span>
                                        <span v-else-if="scope.row.callFailedReason=== '5'">{{$t('processing.reason5')}}</span>
                                        <span v-else-if="scope.row.callFailedReason=== '6'">{{$t('processing.reason6')}}</span>
                                        <span v-else-if="scope.row.callFailedReason=== '7'">{{$t('processing.reason7')}}</span>
                                        <span v-else-if="scope.row.callFailedReason=== '8'">{{$t('processing.reason8')}}</span>
                                        <span v-else-if="scope.row.callFailedReason=== '9'">{{$t('processing.reason9')}}</span>
                                        <span v-else-if="scope.row.callFailedReason=== '10'">{{$t('processing.reason10')}}</span>
                                        <span v-else-if="scope.row.callFailedReason=== '11'">{{$t('processing.reason11')}}</span>
                                        <span v-else-if="scope.row.callFailedReason=== '12'">{{$t('processing.reason12')}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    header-align="center"
                                    align="center"
                                    prop="dealResult"
                                    :label="$t('collDetail.handleResult')"
                                    width="100">
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.dealResult=== '1'">{{$t('processing.result1')}}</span>
                                        <span v-else-if="scope.row.dealResult=== '2'">{{$t('processing.result2')}}</span>
                                        <span v-else-if="scope.row.dealResult=== '3'">{{$t('processing.result3')}}</span>
                                        <span v-else-if="scope.row.dealResult=== '4'">{{$t('processing.result4')}}</span>
                                        <span v-else-if="scope.row.dealResult=== '5'">{{$t('processing.result5')}}</span>
                                        <span v-else-if="scope.row.dealResult=== '6'">{{$t('processing.result6')}}</span>
                                        <span v-else-if="scope.row.dealResult=== '7'">{{$t('processing.result7')}}</span>
                                        <span v-else-if="scope.row.dealResult=== '8'">{{$t('processing.result8')}}</span>
                                        <span v-else-if="scope.row.dealResult=== '9'">{{$t('processing.result9')}}</span>
                                        <span v-else-if="scope.row.dealResult=== '10'">{{$t('processing.result10')}}</span>
                                        <span v-else-if="scope.row.dealResult=== '11'">{{$t('processing.result11')}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    header-align="center"
                                    align="center"
                                    prop="collectRemark"
                                    :label="$t('collDetail.collectRemark')"
                                    width="280">
                                </el-table-column>
                                <el-table-column
                                    header-align="center"
                                    align="center"
                                    prop="baseUserName"
                                    :label="$t('collDetail.operator')"
                                    width="100">
                                </el-table-column>
                            </el-table>
                        </div>
                        <div class="personal-opinion-item pagination-container" style="margin-left: 30px;">
                            <el-pagination
                            @size-change="handleSizeChangeColl"
                            @current-change="handleCurrentChangeColl"
                            :current-page="listQueryColl.page"
                            :page-sizes="[10, 20, 30, 50]"
                            :page-size="listQueryColl.limit"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="totalColl">
                            </el-pagination>
                        </div>
                    </div>
                    <div class="back">
                        <button type='button' @click='cancel'>
                            {{$t('btn.close')}}
                        </button>
                    </div>
                </el-card>
            </el-tab-pane>
            <el-tab-pane :label="$t('approvalDetail.maillist')" name="second">
                <div class='menu-search'> 
                    <div class='menu-title'>
                        <div class='searchItem'>
                            <span>{{$t('approvalDetail.phoneNo')}}</span>
                            <el-input v-model='listQuery.phoneNo' :placeholder="$t('rule.phoneNo')" size='small'></el-input>
                        </div>
                        <div class='searchItem'>
                            <span>{{$t('approvalDetail.contactName')}}</span>
                            <el-input v-model='listQuery.contactName' :placeholder="$t('rule.realName')" size='small'></el-input>
                        </div>
                        <div class='menu-title-btn'>
                            <button type='button' @click='search'>
                                {{$t('btn.search')}}
                            </button>
                            <button type='button' @click='reset'>
                                {{$t('btn.reset')}}
                            </button>
                        </div>
                    </div>
                    <el-table
                        v-loading="listLoading"
                        ref='multipleTable'
                        :data='tableData'
                        tooltip-effect='dark'
                        style='width: 90%'
                        class='tables'
                        border
                        size='mini'>
                        <el-table-column
                        header-align="center"
                        align="center"
                        :label="$t('approvalDetail.num')"
                        width="60">
                        <template slot-scope="scope">
                            <span>{{scope.row.index}}</span>
                        </template>
                        </el-table-column>
                        <el-table-column
                        header-align="center"
                        align="center"
                        prop='contactName'
                        :label="$t('approvalDetail.contactName')"
                        width="120">
                        </el-table-column>
                        <el-table-column
                        header-align="center"
                        align="center"
                        prop='contactPhone'
                        :label="$t('approvalDetail.contactPhone')"
                        width="150">
                        </el-table-column>
                        <el-table-column
                        header-align="center"
                        align="center"
                        prop='contactStatus'
                        :label="$t('approvalDetail.contactStatus')"
                        width="140">
                        <template slot-scope="scope">
                            <span v-if="scope.row.contactStatus=== 1">{{$t('approvalDetail.yes')}}</span>
                            <span v-if="scope.row.contactStatus=== 2">{{$t('approvalDetail.no')}}</span>
                        </template> 
                        </el-table-column>
                        <el-table-column
                        header-align="center"
                        align="center"
                        prop='contactRelation'
                        :label="$t('approvalDetail.relation')"
                        width="100">
                        </el-table-column>
                    </el-table>
                    <div class="pagination-container">
                        <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="listQuery.page"
                        :page-sizes="[5, 10, 20, 50]"
                        :page-size="listQuery.limit"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                        </el-pagination>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane :label="$t('approvalDetail.calllog')" name="third">
                <div class='menu-search'> 
                    <div class='menu-title'>
                        <div class='searchItem'>
                            <span>{{$t('approvalDetail.phoneNo')}}</span>
                            <el-input v-model='listQuery1.callUserPhone' :placeholder="$t('rule.phoneNo')" size='small'></el-input>
                        </div>
                        <div class='searchItem'>
                            <span>{{$t('approvalDetail.contactName')}}</span>
                            <el-input v-model='listQuery1.callUserName' :placeholder="$t('rule.realName')" size='small'></el-input>
                        </div>
                        <div class='menu-title-btn'>
                            <button type='button' @click='search2'>
                                {{$t('btn.search')}}
                            </button>
                            <button type='button' @click='reset2'>
                                {{$t('btn.reset')}}
                            </button>
                        </div>
                    </div>
                    <el-table
                        v-loading="listLoading1"
                        ref='multipleTable'
                        :data='tableData1'
                        tooltip-effect='dark'
                        style='width: 90%'
                        class='tables'
                        border
                        size='mini'>
                        <el-table-column
                        header-align="center"
                        align="center"
                        :label="$t('approvalDetail.num')"
                        width="60">
                        <template slot-scope="scope">
                            <span>{{scope.row.index}}</span>
                        </template>
                        </el-table-column>
                        <el-table-column
                        header-align="center"
                        align="center"
                        prop='callUserName'
                        :label="$t('approvalDetail.contactsName')"
                        width="120">
                        </el-table-column>
                        <el-table-column
                        header-align="center"
                        align="center"
                        prop='callUserPhone'
                        :label="$t('approvalDetail.phoneNo')"
                        width="140">
                        </el-table-column>
                        <el-table-column
                        header-align="center"
                        align="center"
                        prop='callStatus'
                        :label="$t('approvalDetail.callStartTime')"
                        width="110">
                            <template slot-scope="scope">
                                <span v-if="scope.row.callStatus=== '1'">{{$t('approvalDetail.call')}}</span>
                                <span v-if="scope.row.callStatus=== '2'">{{$t('approvalDetail.oncall')}}</span>
                            </template> 
                        </el-table-column>
                        <el-table-column
                        header-align="center"
                        align="center"
                        prop='callStatus'
                        :label="$t('approvalDetail.callStatus')"
                        width="110">
                        </el-table-column>
                        <el-table-column
                        header-align="center"
                        align="center"
                        prop='callTime'
                        :label="$t('approvalDetail.callTime')"
                        width="110">
                        </el-table-column>
                    </el-table>
                    <div class="pagination-container">
                        <el-pagination
                        @size-change="handleSizeChange1"
                        @current-change="handleCurrentChange1"
                        :current-page="listQuery1.page"
                        :page-sizes="[5, 10, 20, 50]"
                        :page-size="listQuery1.limit"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total1">
                        </el-pagination>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane :label="$t('approvalDetail.smslog')" name="fourth">
                <div class='menu-search'>
                    <el-table
                        :row-class-name="smsRowClass"
                        v-loading="listLoading2"
                        ref='multipleTable'
                        :data='tableData2'
                        tooltip-effect='dark'
                        style='width: 90%'
                        class='tables'
                        border
                        size='mini'>
                        <el-table-column
                        header-align="center"
                        align="center"
                        :label="$t('approvalDetail.num')"
                        width="60">
                        <template slot-scope="scope">
                            <span>{{scope.row.index}}</span>
                        </template>
                        </el-table-column>
                        <el-table-column
                        header-align="center"
                        align="center"
                        prop='smsUserName'
                        :label="$t('approvalDetail.contactsName')"
                        width="120">
                        </el-table-column>
                        <el-table-column
                        header-align="center"
                        align="center"
                        prop='smsUserPhone'
                        :label="$t('approvalDetail.phoneNo')"
                        width="120">
                        </el-table-column>
                        <el-table-column
                        header-align="center"
                        align="center"
                        prop='smsStatus'
                        :label="$t('approvalDetail.smsStatus')"
                        width="100">
                            <template slot-scope="scope">
                                <span v-if="scope.row.smsStatus=== '2'">{{$t('approvalDetail.send')}}</span>
                                <span v-if="scope.row.smsStatus=== '1'">{{$t('approvalDetail.receive')}}</span>
                            </template> 
                        </el-table-column>
                        <el-table-column
                        header-align="center"
                        align="center"
                        prop='smsCrtTime'
                        :label="$t('approvalDetail.smsCrtTime')"
                        width="180">
                        </el-table-column>
                        <el-table-column
                        header-align="center"
                        align="center"
                        prop='smsContent'
                        :label="$t('approvalDetail.smsContent')"
                        width="300"
                        fixed="right">
                        </el-table-column>
                    </el-table>
                    <div class="pagination-container">
                        <el-pagination
                        @size-change="handleSizeChange2"
                        @current-change="handleCurrentChange2"
                        :current-page="listQuery2.page"
                        :page-sizes="[5, 10, 20, 50]"
                        :page-size="listQuery2.limit"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total2">
                        </el-pagination>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane :label="$t('approvalDetail.top')" name="fifth">
                <div class="topname">{{$t('approvalDetail.calllog')}}</div>
                <el-table
                    v-loading="listLoading3"
                    ref='multipleTable'
                    class="tables"
                    :data='tableData3.slice((listQuery3.page-1)*listQuery3.limit,listQuery3.page*listQuery3.limit)'
                    tooltip-effect='dark'
                    style="width: 90%"
                    border
                    size='mini'>
                    <el-table-column
                    header-align="center"
                    align="center"
                    :label="$t('approvalDetail.num')"
                    width="60">
                    <template slot-scope="scope">
                        <span>{{scope.row.index}}</span>
                    </template>
                    </el-table-column>
                    <el-table-column
                    header-align="center"
                    align="center"
                    prop='callUserName'
                    :label="$t('approvalDetail.contactsName')">
                    </el-table-column>
                    <el-table-column
                    header-align="center"
                    align="center"
                    prop='callUserPhone'
                    :label="$t('approvalDetail.phoneNo')">
                    </el-table-column>
                    <el-table-column
                    header-align="center"
                    align="center"
                    prop='totalNum'
                    :label="$t('approvalDetail.totalNum')">
                    </el-table-column>
                    <el-table-column
                    header-align="center"
                    align="center"
                    prop='totalCallTime'
                    :label="$t('approvalDetail.totalCallTime')">
                    </el-table-column>
                </el-table>
                <div class="pagination-container">
                    <el-pagination
                    @size-change="handleSizeChange3"
                    @current-change="handleCurrentChange3"
                    :current-page="listQuery3.page"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="listQuery3.limit"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="tableData3.length">
                    </el-pagination>
                </div>
                <div class="topname">{{$t('approvalDetail.smslog')}}</div>
                <el-table
                    v-loading="listLoading4"
                    ref='multipleTable'
                    class="tables"
                    :data='tableData4.slice((listQuery4.page-1)*listQuery4.limit,listQuery4.page*listQuery4.limit)'
                    tooltip-effect='dark'
                    style="width: 90%"
                    border
                    size='mini'>
                    <el-table-column
                    header-align="center"
                    align="center"
                    :label="$t('approvalDetail.num')"
                    width="60">
                    <template slot-scope="scope">
                        <span>{{scope.row.index}}</span>
                    </template>
                    </el-table-column>
                    <el-table-column
                    header-align="center"
                    align="center"
                    prop='smsUserName'
                    :label="$t('approvalDetail.contactsName')">
                    </el-table-column>
                    <el-table-column
                    header-align="center"
                    align="center"
                    prop='smsUserPhone'
                    :label="$t('approvalDetail.phoneNo')">
                    </el-table-column>
                    <el-table-column
                    header-align="center"
                    align="center"
                    prop='totalNum'
                    :label="$t('approvalDetail.smstotalNum')">
                    </el-table-column>
                    <el-table-column
                    header-align="center"
                    align="center"
                    prop='sendNum'
                    :label="$t('approvalDetail.sendNum')">
                    </el-table-column>
                    <el-table-column
                    header-align="center"
                    align="center"
                    prop='getNum'
                    :label="$t('approvalDetail.getNum')">
                    </el-table-column>
                </el-table>
                <div class="pagination-container">
                    <el-pagination
                    @size-change="handleSizeChange4"
                    @current-change="handleCurrentChange4"
                    :current-page="listQuery4.page"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="listQuery4.limit"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="tableData4.length">
                    </el-pagination>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import { mapGetters } from "vuex";
    import { busRecordPage, interestDetails, getAllBreakPenalty } from 'api/collection/processing/index'
    import { getContact } from 'api/trust/approvalDetail/index';
    import { addressPage, callPage, smsInfoPage, top20Call, top20Sms } from 'api/trust/addressList/index';
    export default {
        data() {
            return {
                channel: '',
                flag: '',
                interestData: {
                    "Pinterest": '',//利息
                    "PaccountFee": '',//转账手续费
                    "PcreditserviceFee": '',//平台手续费
                    "overdueRate": '',//罚息
                    "overdueDay": '',//逾期天数
                    "totalInterestPenalty": '',//利息罚息总计
                    "PinterestAmt": '',//利息
                    "PaccountFeeAmt": '',//转账手续费
                    "PcreditserviceFeeAmt": '',//平台手续费
                    "overdueRateAmt": '',//罚息
                },
                redRepAmt: '',
                overdueInterest: '',
                breakInterestAmt: '',
                listLoading: true,
                listLoading1: true,
                listLoading2: true,
                listLoading3: true,
                listLoading4: true,
                activeName2: 'first',
                listQuery: {
                    channel: '',
                    userId: undefined,
                    contactName: '',
                    phoneNo: '',
                    limit: 5,
                    page: 1
                },
                total: null,
                listQuery1: {
                    channel: '',
                    userId: undefined,
                    callUserName: '',
                    callUserPhone: '',
                    limit: 5,
                    page: 1
                },
                total1: null,
                listQuery2: {
                    channel: '',
                    userId: undefined,
                    smsUserName: '',
                    smsUserPhone: '',
                    limit: 5,
                    page: 1
                },
                total2: null,
                listQuery3: {
                    channel: '',
                    page: 1,
                    limit: 5
                },
                total3: null,
                listQuery4: {
                    channel: '',
                    page: 1,
                    limit: 5
                },
                total4: null,
                tableData: [],
                tableData1: [],
                tableData2: [],
                tableData3: [],
                tableData4: [],
                userId: '',
                realName: '',
                totalColl: null,
                listQueryColl: {
                    "limit": 10, //每页条数
                    "page": 1, //当前页数
                    "orderId": ""
                },
                inp1: '',
                inp2: '',
                inp3: '',
                overdueAmt: '',
                breakAmt: '',
                collectRemark: '',
                callStatus: [
                    {
                        value: '',
                        label: this.$t('rule.choose')
                    },
                    {
                        value: '1',
                        label: this.$t('collDetail.normal')
                    },
                    {
                        value: '2',
                        label: this.$t('collDetail.fail')
                    }
                ],
                errorResult: [
                    {
                        value: '',
                        label: this.$t('rule.choose')
                    },
                    {
                        value: '1',
                        label: this.$t('processing.reason1')
                    },
                    {
                        value: '2',
                        label: this.$t('processing.reason2')
                    },
                    {
                        value: '3',
                        label: this.$t('processing.reason3')
                    },
                    {
                        value: '4',
                        label: this.$t('processing.reason4')
                    },
                    {
                        value: '5',
                        label: this.$t('processing.reason5')
                    },
                    {
                        value: '6',
                        label: this.$t('processing.reason6')
                    },
                    {
                        value: '7',
                        label: this.$t('processing.reason7')
                    },
                    {
                        value: '8',
                        label: this.$t('processing.reason8')
                    },
                    {
                        value: '9',
                        label: this.$t('processing.reason9')
                    },
                    {
                        value: '10',
                        label: this.$t('processing.reason10')
                    },
                    {
                        value: '11',
                        label: this.$t('processing.reason11')
                    },
                    {
                        value: '12',
                        label: this.$t('processing.reason12')
                    }
                ],
                handleResult: [
                    {
                        value: '',
                        label: this.$t('rule.choose')
                    },
                    {
                        value: '1',
                        label: this.$t('processing.result1')
                    },
                    {
                        value: '2',
                        label: this.$t('processing.result2')
                    },
                    {
                        value: '3',
                        label: this.$t('processing.result3')
                    },
                    {
                        value: '4',
                        label: this.$t('processing.result4')
                    },
                    {
                        value: '5',
                        label: this.$t('processing.result5')
                    },
                    {
                        value: '6',
                        label: this.$t('processing.result6')
                    },
                    {
                        value: '7',
                        label: this.$t('processing.result7')
                    },
                    {
                        value: '8',
                        label: this.$t('processing.result8')
                    },
                    {
                        value: '9',
                        label: this.$t('processing.result9')
                    },
                    {
                        value: '10',
                        label: this.$t('processing.result10')
                    },
                    {
                        value: '11',
                        label: this.$t('processing.result11')
                    }
                ],
                recordList: [
                    {
                        "dealCrtTime": "",//操作时间
                        "callResult": "",//通话结果
                        "callFailedReason": "",//失败原因
                        "dealResult": "",//处理结果
                        "collectRemark": "",//催收意见
                        "baseUserName": ""//操作人
                    }
                ],
                lanStatus: null,
                customerInfo: {
                    realName: '',
                    appUserName: '',
                    companyTel: ''
                },
                getContactArr: [],
                listObj: {}
            }
        },
        created() {
            if (this.language === 'zh') {
                this.lanStatus = 1;
            } else if (this.language === 'en') {
                this.lanStatus = 2;
            } else {
                this.lanStatus = 3;
            }
            this.getParamsDetail()
            //表格
            this.getListColl()
            //回显
            this.inp1 = this.collQueryDetails.callResult
            this.inp2 = this.collQueryDetails.callFailedReason
            this.inp3 = this.collQueryDetails.dealResult
            this.collectRemark = this.collQueryDetails.collectRemark
            this.getParams();
            //紧急联系人
            let contact = {};
            contact.orderId = this.listQueryColl.orderId
            contact.msgType = this.lanStatus
            getContact(contact)
            .then(response => {
                if(response.data.length > 0) {
                    response.data.forEach(item => {
                        this.flag = item.userIdentity
                    })
                    this.getContactArr = response.data
                }
            })
            this.interestFn() //利息详情
        },
        computed: {
            ...mapGetters(["elements", "language", "collQueryDetails"])
        },
        methods: {
            //短信记录和APP关键字标红
            smsRowClass(row) {
                if (row.row.hit === 1) {
                    return 'warning-row';
                } else {
                    return '';
                }
            },
            interestFn() {
                interestDetails(this.collQueryDetails.orderId)
                .then(res => {
                    let re = /(?=(?!\b)(\d{3})+$)/g;
                    let str = String(res.data.data.totalInterestPenalty)
                    res.data.data.totalInterestPenalty = str.replace(re, ',');
                    let str2 = String(res.data.data.PinterestAmt)
                    res.data.data.PinterestAmt = str2.replace(re, ',');
                    let str3 = String(res.data.data.PaccountFeeAmt)
                    res.data.data.PaccountFeeAmt = str3.replace(re, ',');
                    let str4 = String(res.data.data.PcreditserviceFeeAmt)
                    res.data.data.PcreditserviceFeeAmt = str4.replace(re, ',');
                    let str5 = String(res.data.data.overdueRateAmt)
                    res.data.data.overdueRateAmt = str5.replace(re, ','); 
                    this.interestData = res.data.data
                })
            },
            getParamsDetail() {
                this.listObj = this.collQueryDetails;
                let re = /(?=(?!\b)(\d{3})+$)/g;
                this.listQueryColl.orderId = this.collQueryDetails.orderId;
                this.overdueAmt = this.collQueryDetails.overdueAmt;
                this.customerInfo.realName = this.collQueryDetails.realName;
                this.customerInfo.appUserName = this.collQueryDetails.appUserName;
                this.customerInfo.companyTel = this.collQueryDetails.companyTel;
                this.overdueInterest = this.collQueryDetails.overdueInterest;
                this.channel = this.collQueryDetails.channel
                let obj = {};
                obj.orderId = this.collQueryDetails.orderId;
                getAllBreakPenalty(obj)
                .then(res => {
                    if (res.length > 0) {
                        let re = /(?=(?!\b)(\d{3})+$)/g;
                        let bStr = String(res[0].breakAmt)
                        this.breakAmt = bStr.replace(re, ',');
                        let biStr = String(res[0].breakInterestAmt)
                        this.breakInterestAmt = biStr.replace(re, ',');
                        let msg = this.breakAmt.replace(/,/g,'');
                        let msg1 = this.breakInterestAmt.replace(/,/g,'');
                        this.redRepAmt = Number(this.collQueryDetails.repayAmt) - Number(msg) - Number(msg1);//减免后应还金额
                        let str = String(this.redRepAmt);
                        this.redRepAmt = str.replace(re, ',');
                    }
                })
            },
            //表格
            getListColl() {
                busRecordPage(this.listQueryColl)
                .then(response => {
                    this.recordList = response.data.rows;
                    this.totalColl = Number(response.data.total);
                })
            },
            cancel() {
                let view = {};
                view.name = this.$route.name;
                view.path = this.$route.path;
                this.$store.dispatch('delVisitedViews', view)
                this.$router.go(-1)
            },
            handleSizeChangeColl(val) {
                this.listQueryColl.limit = val;
                this.getListColl()
            },
            handleCurrentChangeColl(val) {
                this.listQueryColl.page = val;
                this.getListColl()
            },
            getParams () {
                this.userId = this.collQueryDetails.userId;
                this.realName = this.collQueryDetails.realName;
            },
            handleClick(tab, event) {
                if(tab.label === this.$t('collDetail.addressList')) {
                    this.getList();
                } else if(tab.label === this.$t('collDetail.calllog')) {
                    this.getList1();
                } else if(tab.label === this.$t('collDetail.smslog')) {
                    this.getList2();
                } else if(tab.label === this.$t('collDetail.top')) {
                    this.getList3();
                    this.getList4();
                }
            },
            getList() {
                //通话录
                this.listQuery.userId = this.userId;
                this.listQuery.channel = this.collQueryDetails.channel;
                this.listQuery.uuid = this.listObj.addressBookUuid;
                addressPage(this.listQuery)
                .then(response => {
                    if(response.status === 200) {
                        this.listLoading = false;
                        response.data.rows.forEach(item => {
                            item.realName = this.realName;
                        })
                        this.tableData = response.data.rows;
                        this.tableData.forEach((item, index) => {
                            item.index = index + (this.listQuery.page - 1) * this.listQuery.limit + 1
                        })
                        this.total = Number(response.data.total);
                    } else {
                        this.listLoading = true;
                    }
                })
            },
            getList1() {
                //通话记录
                this.listQuery1.userId = this.userId;
                this.listQuery1.channel = this.collQueryDetails.channel;
                this.listQuery1.uuid = this.listObj.addressBookUuid;
                callPage(this.listQuery1)
                .then(response => {
                    if(response.status === 200) {
                        this.listLoading1 = false;
                        this.tableData1 = response.data.rows;
                        this.tableData1.forEach((item, index) => {
                            item.index = index + (this.listQuery1.page - 1) * this.listQuery1.limit + 1
                        })
                        this.total1 = Number(response.data.total);
                    } else {
                        this.listLoading1 = true;
                    }
                })
            },
            getList2() {
                //短信记录
                this.listQuery2.userId = this.userId;
                this.listQuery2.channel = this.collQueryDetails.channel;
                this.listQuery2.uuid = this.listObj.addressBookUuid;
                smsInfoPage(this.listQuery2)
                .then(response => {
                    if(response.status === 200) {
                        this.listLoading2 = false;
                        this.tableData2 = response.data.rows;
                        this.tableData2.forEach((item, index) => {
                            item.index = index + (this.listQuery2.page - 1) * this.listQuery2.limit + 1
                        })
                        this.total2 = Number(response.data.total);
                    } else {
                        this.listLoading2 = true;
                    }
                })
            },
            getList3() {
                //通话top
                let obj = {};
                obj.userId = this.userId;
                obj.channel = this.collQueryDetails.channel;
                obj.uuid = this.listObj.addressBookUuid;
                top20Call(obj)
                .then(response => {
                    if(response.status === 200) {
                        this.listLoading3 = false;
                        this.tableData3 = response.data
                        this.tableData3.forEach((item, index) => {
                            item.index = index + (this.listQuery3.page - 1) * this.listQuery3.limit + 1
                        })
                    } else {
                        this.listLoading3 = true;
                    }
                })
            },
            getList4() {
                //短信top
                let obj1 = {};
                obj1.userId = this.userId;
                obj1.channel = this.collQueryDetails.channel;
                obj1.uuid = this.listObj.addressBookUuid;
                top20Sms(obj1)
                .then(response => {
                    if(response.status === 200) {
                        this.listLoading4 = false;
                        this.tableData4 = response.data
                        this.tableData4.forEach((item, index) => {
                            item.index = index + (this.listQuery4.page - 1) * this.listQuery4.limit + 1
                        })
                    } else {
                        this.listLoading4 = true;
                    }
                })
            },
            //重置
            reset() {
                this.listQuery.limit = 5;
                this.listQuery.page = 1;
                this.listQuery.phoneNo = "";
                this.listQuery.contactName = "";
            },
            //查询
            search() {
                this.listQuery.page = 1;
                this.getList()
            },
            //通话记录重置
            reset2() {
                this.listQuery1.callUserPhone = "";
                this.listQuery1.callUserName = "";
            },
            //通话记录查询
            search2() {
                this.listQuery1.page = 1;
                this.getList1()
            },
            handleSizeChange(val) {
                this.listQuery.limit = val;
                this.getList();
            },
            handleCurrentChange(val) {
                this.listQuery.page = val;
                this.getList();
            },
            handleSizeChange1(val) {
                this.listQuery1.limit = val;
                this.getList1();
            },
            handleCurrentChange1(val) {
                this.listQuery1.page = val;
                this.getList1();
            },
            handleSizeChange2(val) {
                this.listQuery2.limit = val;
                this.getList2();
            },
            handleCurrentChange2(val) {
                this.listQuery2.page = val;
                this.getList2();
            },
            handleSizeChange3(val) {
                this.listQuery3.limit = val;
            },
            handleCurrentChange3(val) {
                this.listQuery3.page = val;
            },
            handleSizeChange4(val) {
                this.listQuery4.limit = val;
            },
            handleCurrentChange4(val) {
                this.listQuery4.page = val;
            }
        }
    }
</script>

<style scoped lang="scss">
.new-group {
    width: 100%;
    height: 100%;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    position: relative;
}
.box-card {
  width: 95%;
  margin-left: 2.5%;
  margin-right: 2.5%;
}
.title {
  line-height: 30px;
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  span:nth-child(1) {
      display: inline-block;
      font-size: 16px;
  }
  .flag-btn {
      display: inline-block;
      font-size: 12px;
      width: 65px;
      height: 22px;
      line-height: 22px;
      text-align: center;
      margin-left: 15px;
      font-weight: normal;
  }
}
.title:before{
  display: block;
  content: "";
  width: 3px;
  height: 16px;
  background-color: #309afe;
}
.title:before {
  margin-right: 8px;
}
::before {
  box-sizing: inherit;
  -webkit-tap-highlight-color: transparent;
}
.personal-opinion {
    width: 100%;
    padding: 10px 0;
    box-sizing: border-box;
    .personal-opinion-item {
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        display: inline-block;
        &>span {
            display: inline-block;
            width: 100px;
            text-align: right;
            font-size: 12px;
            font-weight: bold;
            margin-right: 15px;
            color: #616264;
        }
        &>div {
            width: 180px;
        }
    }
    .remarks {
        width: 100%;
        display: flex;
        align-items: flex-start;
        div:nth-child(2) {
            width: 80%;
            margin-left: 5px;
        }
    }
    .datas {
        width: 100%;
        div:nth-child(2) {
            width: 80%;
        }
    }
}
.back { 
    margin: 10px 0 40px 0;
    button {
        padding: 0 20px;
        height: 28px;
        background: #20a0ff;
        color: #fff;
        outline: none;
        border-width: 0;
        border-radius: 4px;
        font-size: 12px;
        &:nth-child(2) {
            margin-left: 10px;
            background: #ebf5ff;
            color: #20a0ff;
            border: 1px solid #abd5ff;
        }
    }
}
.unit {
    display: inline-block;
    width: 20px;
    font-weight: normal;
    margin-left: 5px;
    font-size: 12px;
}
.menu-title {
  width: 90%;
  height: 50px;
  box-sizing: border-box;
  background: #ffffff;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  margin-left: 5%;
  & > div {
    display: flex;
    align-items: center;
    font-size: 15px;
    span {
      width: 50%;
      padding-left: 10px;
      padding-right: 10px;
      text-align: right;
    }
  }
  .searchItem {
    width: 30%;
    margin-left: 2%;
    display: flex;
    justify-content: space-center;
    span {
      display: inline-block;
      width: 86px;
      text-align: right;
      font-size: 12px;
      font-weight: bold;
    }
    div:nth-child(2) {
      width: 116px;
    }
  }
  .searchItem-date {
    width: 32%;
  }
  .menu-title-btn {
    margin-left: 30px;
    button {
      padding: 0 20px;
      height: 28px;
      background: #20a0ff;
      color: #fff;
      outline: none;
      border-width: 0;
      margin-left: 15px;
      border-radius: 4px;
      font-size: 12px;
    }
  }
}
.tables {
  margin-left: 5%;
}
.pagination-container {
  width: 92%;
  margin-left: 4%;
  margin-bottom: 20px;
}
.topname {
    margin-left: 20px;
    margin-bottom: 20px;
    font-weight: bold;
}
.customer {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    font-size: 12px;
    .customer-item {
        width: 30%;
        text-align: left;
        line-height: 35px;
        span:nth-child(1) {
            display: inline-block;
            width: 120px;
            text-align: right;
            margin-right: 5px;
            color: #616264;
        }
        span:nth-child(2) {
            color: #8a8a8c;
        }
    }
}
.personal-opinion-code {
    margin-bottom: 20px;
    display: inline-block;
    float: left;
    &>span {
        display: inline-block;
        width: 100px;
        text-align: right;
        font-size: 12px;
        font-weight: bold;
        margin-right: 19px;
        color: #616264;
        float: left;
    }
    .coll-code {
        border:solid 1px #bfcbd9;
        height: 133px;
        font-size: 12px;
        text-align: center;
        box-sizing: border-box;
        float: left;
        .coll-code-item {
            display: flex; 
            height: 22px;
            line-height: 22px;
        }
        .litter {
            width: 90px;
            border-right: 1px solid #bfcbd9;
            border-bottom: 1px solid #bfcbd9;
        }
    }
    .coll-code-fine {
        border:solid 1px #bfcbd9;
        height: 133px;
        font-size: 12px;
        text-align: center;
        box-sizing: border-box;
        float: left;
        &>div {
            width: 100%;
            height: 26.5px;
            line-height: 26.5px;
            border-bottom: 1px solid #bfcbd9;
            .ride {
                margin: 0 5px;
            }
        }
    }
}
.el-table .warning-row {
    background: rgb(58, 230, 52);
}
</style>